<template>
    <view class="login-page">
        <form @submit="formSubmit">
            <view class="login-container">
                <view class="login-text">欢迎登录！</view>
                <view class="login-form">
                    <view class="login-form__lable">手机号码</view>
                    <view class="login-form__input">
                        <input v-model.trim="formData.username" class="login-input" type="text" name="username" maxlength="11" placeholder="请输入您的手机号码" />
                        <image @click="formData.username = ''" v-if="formData.username" src="/static/img/login/clear.png" class="clear-icon next-icon"></image>
                    </view>
                </view>
                <view class="login-form">
                    <view class="login-form__lable">密码</view>
                    <view class="login-form__input">
                        <input v-model.trim="formData.password" type="password" class="login-input" name="password" placeholder="请输入您的密码" />
                        <image @click="formData.password = ''" v-if="formData.password" src="/static/img/login/clear.png" class="clear-icon next-icon" :class="{ isSend: disabled }"></image>
                    </view>
                </view>

                <view class="login-footer">
                    <button class="btn-blue flex" form-type="submit" :loading="loading">
                        {{ loading ? "登录中" : "登录" }}
                    </button>
                </view>
                <view class="login-register">
                    <view></view>
                    <!-- <navigator class="inline" url="./findPwd" open-type="navigate" hover-class="none">忘记密码？</navigator> -->
                    <view> 还没有账号？<navigator class="text-red inline" url="/pages/login/register" open-type="navigate" hover-class="none"> 立即注册 </navigator> </view>
                </view>
            </view>
        </form>
    </view>
</template>

<script>
import md5 from "js-md5"
import WxValidate from "@/utils/WxValidate"
import { mapActions } from "vuex"
export default {
    data() {
        return {
            loading: false,
            formData: {
                username: "",
                password: ""
            },
            disabled: false,
            validate: {}
        }
    },
    async onLoad() {
        const msg = {
            username: { required: "请输入您的账号" },
            password: { required: "请输入您的密码", minlength: "密码长度最小为6位" }
        }
        const rule = {
            username: { required: true },
            password: { required: true, minlength: 6 }
        }
        const rules = { username: rule.username, password: rule.password }
        const message = { username: msg.username, password: msg.password }
        this.validate = new WxValidate(rules, message)
    },
    methods: {
        ...mapActions(["userLogin", "getUserInfo"]),
        navPage() {
            uni.navigateTo({ url: "./findPwd" })
        },
        async formSubmit() {
            try {
                // 传入表单数据，调用验证方法
                if (!this.validate.checkForm(this.formData)) {
                    const error = this.validate.errorList[0]
                    return this.$showToast(error.msg)
                }
                if (this.loading) return
                this.loading = true
                let params = {
                    ...this.formData,
                    password: md5(this.formData.password)
                }
                await this.userLogin({ method: "userLogin", ...params })
                await this.getUserInfo()
                uni.reLaunch({ url: "/pages/index" })
                this.loading = false
            } catch {
                this.loading = false
            }
        }
    }
}
</script>
<style lang="scss" scoped>
.btn-text {
    position: absolute;
    right: 0;
    top: 20rpx;
}
</style>
